<template>
	<view class="pb200" v-if="data && data.shop">
		<view class="ml30 mt30 mr30 flex">
			<!-- 头像 -->
			<image :src="data.shop.avatar" class="w70 h70 radius70 mr20"></image>
			<!-- 右边 -->
			<view class="flex1 pb20 u-border-bottom">
				<!-- 上面 -->
				<view class="flex row-between mb20">
					<text class="fs28">{{data.shop.name}}</text>
					<text class="fs24 color9">{{data.create_time}}</text>
				</view>
				<!-- 中间 -->
				<view class="fs28 mb20">{{data.name}}</view>
				<view class="flex commentimgBox row-between flex-wrap mb20">
					<image :src="i" v-for="(i,j) in data.images" :key="j+'a'" @click="priveImg(j)" :class="['radius16', 'h300', 'mb10',
					data.images.length==1?'onePic':'',
					data.images.length==2?'twoPic':'',
					data.images.length==3?'threePic':'',
					data.images.length==4?'fourPic':'',
					data.images.length>=5?'threePic':'',]" mode="aspectFill"></image>
				</view>
				<view class="flex row-right color9 fs28 col-center">
					<view class="mr50 flex col-center">
						<text class="cuIcon-attention fs40"></text>
						<text>{{data.browse}}</text>
					</view>
					<view class="mr50">
						<text>评论</text>
						<text>{{data.comment}}</text>
					</view>
					<view class="" @click="give(id)">
						<u-icon name="thumb-up" v-if="data.is_give == 0" size="40"></u-icon>
						<u-icon name="thumb-up-fill" v-else color="#D23030" size="40"></u-icon>
						<text>{{data.give}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="bg-f5 h20"></view>
		<view class="pl30 pr30">
			<view class="flex col-center pt20">
				<view class="w10 h30 radius5 bg-them"></view>
				<text class="ml20">评论({{data.commentInfo.length}})</text>
			</view>
			<view class="mt30">
				<view class="ml30 mt30 mr30 flex" v-for="(item,index) in data.commentInfo" :key="index">
					<!-- 头像 -->
					<image :src="item.avatar" class="w70 h70 radius70 mr20"></image>
					<!-- 右边 -->
					<view class="flex1 pb20 u-border-bottom">
						<!-- 上面 -->
						<view class="flex row-between mb20">
							<text class="fs28">{{item.member}}</text>
							<view @click="commentGive(item.id, item)">
								<u-icon name="thumb-up" v-if="item.commentGive == 0" size="35"></u-icon>
								<u-icon name="thumb-up-fill" v-else color="#D23030" size="35"></u-icon>
							</view>
						</view>
						<!-- 中间 -->
						<view class="fs28 mb20">{{item.name}} <text class=" color8 ml10" @click="backUser(item)">回复</text></view>
						<view class="p20 radius10 bg-f5" v-if="item.commentfirst">
							<view class="" v-for="(obj,i) in item.commentfirst" :key="i">
								<text class="color-theme fs20">{{obj.member}}</text>
								<text class="fs20">:{{obj.name}}</text>
							</view>
						</view>
						<text class="color8 fs20" v-if="item.commentCount > 0 && item.commentCount != item.commentfirst.length" @click="lockMore(item)">查看更多</text>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom pl20 pr20 pt10 pb30 shadow-default bg-f">
			<view class="bg-f5 radius50 pl20 flex row-between col-center" style="overflow: hidden;">
				<text v-if="backUserName !== ''">回复{{backUserName}}:</text>
				<input type="text" class="fs24 flex1" v-model="name" placeholder="请输入" />
				<view class="bg-them pt20 pb20 pl50 pr50 color-f" @click="commit">确认</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: {},
				id: '',
				page: 1,
				commentInfoList: [],
				name: '',
				pid: '',
				user_id: '',
				backUserName: ''
			};
		},
		onLoad(option) {
			this.id = option.id
			this.getData()
		},
		methods: {
			// 预览图片
			priveImg (index) {
				let that = this
				uni.previewImage({
					urls: that.data.images,
					current: index
				})
			},
			// 查看更多回复
			lockMore (item) {
				this.$api.viewComments({id: this.id, pid: item.id}).then(res => {
					item.commentfirst.push(...res.data)
				})
			},
			// 回复评论
			backUser (item) {
				this.pid = item.id
				this.user_id = item.member_id
				this.backUserName = item.member
			},
			// 发表评论
			commit () {
				this.$api.comment({id:this.id, name:this.name, pid: this.pid, user_id: this.user_id}).then(res => {
					this.$tool.msg(res.msg)
					setTimeout(() => {
						this.backUserName = ''
						this.name = ''
						this.page = 1
						this.getData()
					}, 1000)
				})
			},
			commentGive (id, item) {
				this.$api.commentGive({id: this.id, comment_id: id}).then(res => {
					item.commentGive = item.commentGive == 1 ? '0' : 1
				})
			},
			// 点赞
			give (id) {
				this.$api.give({id: id}).then(res => {
					this.page = 1
					this.getData()
				})
			},
			// 获取数据
			getData () {
				this.$api.circleDateils({id: this.id, page: this.page, size: 10}).then(res => {
					if (res.data.commentInfo.length > 0) {
						this.commentInfoList.push(...res.data.commentInfo)
						this.page += 1
					}
					this.data = res.data
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}
.commentimgBox {
		// image {
		// 	width: 32%;
		// }
	}
.editimg {
	position: fixed;
	right: 30rpx;
	bottom: 200rpx;
}
.onePic {
	width: 100%;
	height: 380rpx !important;
}
.twoPic{
	width: 49% !important;
	height: 300rpx !important;
	margin-right: 0 !important;
}
.threePic {
	width: 32%;
	height: 180rpx !important;
}
.fourPic {
	width: 48%;
	height: 300rpx !important;
	margin-right: 0!important;
}
</style>
